<template>
  <div class="app-container flex1 flex-col over-hidden product-property-list">
    <el-form class="flex-shrink-0">
      <el-form
        class="flex-shrink-0"
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="80px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="商品名称" prop="productName">
              <el-input
                v-model="queryParams.productName"
                placeholder="请输入商品名称"
                clearable
                size="small"
                style="width: 100%"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品类别" prop="productType">
              <el-input
                v-model="queryParams.productType"
                placeholder="请输入商品类别"
                clearable
                size="small"
                style="width: 100%"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="queryParams.status"
                placeholder="请选择状态"
                clearable
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="status in statusArr"
                  :key="status.dictValue"
                  :label="status.dictLabel"
                  :value="status.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery('queryForm')"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-form>

    <div class="flex-shrink-0 opt-btn">
      <el-button type="primary" size="small" @click="handleAddProduct">
        新增
      </el-button>
      <el-button type="primary" size="small" @click="handleImport">
        导入
      </el-button>
      <el-button type="primary" size="small" @click="handleExport">
        导出
      </el-button>
      <el-button
        :disabled="selectedData.length === 0"
        type="primary"
        size="small"
        @click="handleBatchUp"
      >
        批量上架
      </el-button>
      <el-button
        :disabled="selectedData.length === 0"
        type="primary"
        size="small"
        @click="handleBatchDown"
      >
        批量下架
      </el-button>
    </div>
    <!-- 剩余空间通过 flex1 全部分给表格，over-hidden 必须使用 -->
    <div class="flex1 over-hidden">
      <el-table
        :data="tableData"
        height="100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        ref="multipleTable"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          label="批次号"
          prop="batchNumber"
        ></el-table-column>
        <el-table-column
          align="center"
          label="商品编码"
          prop="productCode"
        ></el-table-column>
        <el-table-column
          align="center"
          label="商品名称"
          prop="productName"
        ></el-table-column>
        <el-table-column
          align="center"
          label="商品类别"
          prop="productType"
        ></el-table-column>
        <el-table-column
          align="center"
          label="商品属性"
          prop="productProperty"
        ></el-table-column>
        <el-table-column align="center" label="商品图片" prop="productImg">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.productSrc"
              fit="fill"
              :preview-src-list="scope.row.productSrcArr"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="库存"
          prop="productInventory"
        ></el-table-column>
        <el-table-column
          align="center"
          label="单位"
          prop="productUnit"
        ></el-table-column>
        <el-table-column
          align="center"
          label="排序"
          prop="productSort"
        ></el-table-column>
        <el-table-column
          align="center"
          label="上下架时间"
          prop="operationTime"
        ></el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span> {{ scope.row.productStatus | dictFilter(statusArr) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleDisplayDetail(scope.row.productCode)"
              >详情
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row.productCode)"
              >编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      class="text-center bgfff pd10 flex-shrink-0"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size.sync="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      :modal-append-to-body="false"
      :title="isAdd ? '新增商品信息' : '编辑商品信息'"
      :visible.sync="dialogVisible"
      top="15vh !important"
      width="56%"
      @close="handleCancel"
    >
      <el-form
        :model="updateParams"
        label-width="120px"
        ref="updateForm"
        :rules="updateRules"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="供应商" prop="supplier">
              <el-select
                :disabled="isView"
                v-model="updateParams.supplier"
                placeholder="请选择供应商"
                clearable
                size="small"
              >
                <el-option
                  v-for="status in supplierArr"
                  :key="status.dictValue"
                  :label="status.dictLabel"
                  :value="status.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批次号" prop="batchNumber">
              <el-input
                :disabled="isView"
                size="small"
                v-model="updateParams.batchNumber"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品编码" prop="productCode">
              <el-input
                :disabled="isView"
                size="small"
                v-model="updateParams.productCode"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商品名称" prop="productName">
              <el-input
                :disabled="isView"
                size="small"
                v-model="updateParams.productName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="牌号" prop="num">
              <el-input
                :disabled="isView"
                size="small"
                v-model="updateParams.num"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格" prop="scale">
              <el-input
                :disabled="isView"
                size="small"
                v-model="updateParams.scale"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="产地" prop="address">
              <el-cascader
                :disabled="isView"
                v-model="updateParams.address"
                placeholder="请选择省/市/区"
                :options="cityList"
                :props="{ value: 'v', label: 'v', children: 'c' }"
                filterable
                clearable
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品类别" prop="productType">
              <el-select
                :disabled="isView"
                v-model="updateParams.productType"
                placeholder="请选择商品类别"
                clearable
                size="small"
              >
                <el-option
                  v-for="status in typeArr"
                  :key="status.dictValue"
                  :label="status.dictLabel"
                  :value="status.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品属性" prop="productProperty">
              <el-select
                :disabled="isView"
                v-model="updateParams.productProperty"
                placeholder="请选择商品属性"
                clearable
                size="small"
              >
                <el-option
                  v-for="status in propertyArr"
                  :key="status.dictValue"
                  :label="status.dictLabel"
                  :value="status.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="库存" prop="productInventory">
              <el-input
                :disabled="isView"
                size="small"
                v-model="updateParams.productInventory"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位" prop="productUnit">
              <el-input
                :disabled="isView"
                size="small"
                v-model="updateParams.productUnit"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排序" prop="productSort">
              <el-input
                :disabled="isView"
                size="small"
                v-model="updateParams.productSort"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="上下架" prop="productStatus">
              <el-radio
                :disabled="isView"
                v-model="updateParams.productStatus"
                label="01"
              >
                上架
              </el-radio>
              <el-radio
                :disabled="isView"
                v-model="updateParams.productStatus"
                label="02"
              >
                下架
              </el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="img-info">
        <div class="title">图片信息</div>
        <div class="content">
          <el-upload
            name="files"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleImageChange"
            :auto-upload="false"
            :file-list="updateParams.fileList"
            list-type="picture-card"
            multiple
            :disabled="isView"
          >
            <i slot="default" class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                  v-if="!isView"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="imgDialog" :modal-append-to-body="false">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div>

      <div class="update-btn" v-if="!isView">
        <el-button type="primary" size="small" @click="handleUpdateConfirm">
          确定
        </el-button>
        <el-button type="warning" size="small" @click="handleCancel">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cityList } from "@/common/js/city.js";
import { tableMixin } from "@/mixins/index";
import { dictFilter } from "@/utils/filters/common";
import { utils } from "@/utils/utils";
export default {
  mixins: [tableMixin],
  filters: { dictFilter },
  data() {
    return {
      cityList,
      total: 0,
      imgDialog: false,
      dialogImageUrl: "",
      disabled: false,
      tableData: [
        {
          batchNumber: "PC000001",
          productCode: "SP000001",
          productName: "钢铁001",
          productType: "钢铁",
          productProperty: "直筒",
          productSrc:
            "https://wjc-bucket.oss-cn-beijing.aliyuncs.com/files/61005729a1534b5893e1a54b83e002cfaa.jpg",
          productInventory: "10",
          productUnit: "吨",
          productSort: "1",
          operationTime: "2022-04-15",
          productStatus: "01",
          supplier: "01",
          productSrcArr: [
            "https://wjc-bucket.oss-cn-beijing.aliyuncs.com/files/61005729a1534b5893e1a54b83e002cfaa.jpg",
          ],
          fileList: [
            {
              url: "https://wjc-bucket.oss-cn-beijing.aliyuncs.com/files/61005729a1534b5893e1a54b83e002cfaa.jpg",
            },
          ],
        },
      ],
      loading: false,
      statusArr: [
        {
          dictValue: "01",
          dictLabel: "已上架",
        },
        {
          dictValue: "02",
          dictLabel: "已下架",
        },
      ],
      queryParams: {
        companyName: "",
        societyCode: "",
        status: "",
      },
      dialogVisible: false,
      isAdd: true,
      isEdit: false,
      isView: false,
      supplierArr: [
        {
          dictValue: "01",
          dictLabel: "深圳一飞冲天有限公司",
        },
        {
          dictValue: "02",
          dictLabel: "深圳牛气冲冲有限公司",
        },
      ],
      typeArr: [
        {
          dictValue: "01",
          dictLabel: "建材类",
        },
        {
          dictValue: "02",
          dictLabel: "零件类",
        },
      ],
      propertyArr: [
        {
          dictValue: "01",
          dictLabel: "直筒",
        },
        {
          dictValue: "02",
          dictLabel: "方形",
        },
      ],
      updateParams: {},
      updateRules: {
        supplier: [
          {
            required: true,
            trigger: ["change"],
            message: "请选择供应商！",
          },
        ],
        batchNumber: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入批次号！",
          },
        ],
        productCode: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入商品编码！",
          },
        ],
        productName: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入商品名称！",
          },
        ],
      },
    };
  },
  created() {},
  computed: {},
  methods: {
    getList() {},
    handleAddProduct() {
      this.isAdd = true;
      this.isView = false;
      const date = utils.getFormatDate(new Date());
      this.updateParams = {
        productStatus: "02",
        operationTime: date,
      };
      this.dialogVisible = true;
      this.$refs.updateForm && this.$refs.updateForm.resetFields();
    },
    handleImport() {
      this.msgInfo("功能正在开发中...");
    },
    handleExport() {
      this.msgInfo("功能正在开发中...");
    },
    handleBatchUp() {
      this.selectedData.map((item) => {
        item.productStatus = "01";
        item.operationTime = utils.getFormatDate(new Date());
      });
      this.msgSuccess("操作成功！");
      this.$refs.multipleTable.clearSelection();
    },
    handleBatchDown() {
      this.selectedData.map((item) => {
        item.productStatus = "02";
        item.operationTime = utils.getFormatDate(new Date());
      });
      this.msgSuccess("操作成功！");
      this.$refs.multipleTable.clearSelection();
    },
    handleImgLoad(e) {
      console.log(e);
    },
    handleEdit(productCode) {
      this.isEdit = true;
      this.isView = false;
      this.updateParams = this.tableData.filter(
        (item) => item.productCode === productCode
      )[0];
      this.dialogVisible = true;
    },
    handleDisplayDetail(productCode) {
      this.isView = true;
      this.updateParams = this.tableData.filter(
        (item) => item.productCode === productCode
      )[0];
      this.dialogVisible = true;
    },
    handleUpdateConfirm() {
      const { productCode } = this.updateParams;
      const repeatFlag = this.tableData.some(
        (item) => item.productCode === productCode
      );
      if (repeatFlag && this.isAdd && !this.isEdit) {
        this.msgError("当前商品已存在，无需新增!");
      } else {
        this.$refs.updateForm.validate((value) => {
          if (value) {
            this.msgSuccess("操作成功！");
            const updateList =
              this.isAdd && !this.isEdit
                ? [...this.tableData, { ...this.updateParams }]
                : [...this.tableData];
            this.tableData = updateList;
            // this.$store.commit("update_propertyList", updateList);
            this.handleCancel();
          }
        });
      }
    },
    handleCancel() {
      this.dialogVisible = false;
    },
    handleRemove(file) {
      const delIndex = this.updateParams.fileList.findIndex(
        (item) => item.uid === file.uid
      );
      this.updateParams.fileList.splice(delIndex, 1);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imgDialog = true;
    },
    handleImageChange(file, fileList) {
      console.log(fileList);
      this.updateParams.fileList = fileList;
      this.updateParams.productSrc = file.url;
      this.updateParams.productSrcArr = [file.url];
    },
  },
};
</script>

<style scoped lang="scss">
.product-property-list {
  height: 100%;
  .opt-btn {
    padding: 20px;
  }
  .img-info {
    .title {
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
    }
  }
  .update-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
